Canvas Widget

Path: Widget Gallery> Basic> Generic Canvas

Canvas widget can be used to draw graphic via JavaScript scripting.

Note: the JavaScript methods are the same that are available for the HTML5 <canvas> tag

Parameter	Description
Canvas Width Canvas Height	Canvas size. Note this is not the widget size. For example, the canvas size could be 500x500 pixels where the widget size could be 100x100 pixels. Draw Hint parameter will define how to stretch the canvas size to fit the widget size.
Draw Hint	Define how fit the canvas inside the widget size Clip No Transformation is applied, coordinate system is not scaled and drawing is clipped inside the widget bounding rectangle. Fit to size Fit to the widget size preserving the canvas model aspect ratio. Stretch Fit to the widget size ignoring the canvas model aspect ratio. Example using a Canvas size larger than the widget size:
Design Time Preview	Canvas preview inside JMobile Studio Note the JavaScript code could use data not available inside JMobile Studio but only inside the HMI device
Auto Clear Background	Automatic clear the background before draw canvas. When disabled, the painted items are persisted and is not necessary redraw everything from scratch.
OnDraw Action	The OnDraw event is executed when the page is painted. This event has to be linked with the JavaScript code that draws the canvas graphic.
OnMousePress Action OnMouseRelease Actions OnMouseDrag Actions	Mouse events

Available Canvas Methods

// Painter Save/Restore

void save(); // calls painter save
void restore(); // calls painter restore

// Scale/Transform

void scale(qreal x, qreal y);
void rotate(qreal angle);
void translate(qreal x, qreal y);
void transform(qreal m11, qreal m12, qreal m21, qreal m22, qreal dx, qreal dy);
void setTransform(qreal m11, qreal m12, qreal m21, qreal m22, qreal dx, qreal dy);

// Gradient

CanvasGradient createLinearGradient(qreal x0, qreal y0, qreal x1, qreal y1);
CanvasGradient createRadialGradient(qreal x0, qreal y0, qreal r0, qreal x1, qreal y1, qreal r1);

// Rectangle Functions

void clearRect(qreal x, qreal y, qreal w, qreal h);
void fillRect(qreal x, qreal y, qreal w, qreal h);
void strokeRect(qreal x, qreal y, qreal w, qreal h);
void rect(qreal x, qreal y, qreal w, qreal h);

// Path

void beginPath();
void closePath();
void moveTo(qreal x, qreal y);
void lineTo(qreal x, qreal y);
void quadraticCurveTo(qreal cpx, qreal cpy, qreal x, qreal y);
void bezierCurveTo(qreal cp1x, qreal cp1y, qreal cp2x, qreal cp2y, qreal x, qreal y);

// Drawing Text

void fillText(const QString &text,qreal x, qreal y);

// Arc

void arcTo(qreal x1, qreal y1, qreal x2, qreal y2, qreal radius);
void arc(qreal x, qreal y, qreal radius, qreal startAngle, qreal endAngle, bool anticlockwise);

// Fill/Stroke

void fill();
void stroke();
void clip();
bool isPointInPath(qreal x, qreal y) const;

// Image manipulation (Draw CImageWgt using target and source rect)

void drawImage(QObject *pObjImage, qreal sx, qreal sy,qreal sw, qreal sh, qreal dx, qreal dy,qreal dw, qreal dh);
void drawImage(QObject *pObjImage, qreal dx, qreal dy);
void drawImage(QObject *pObjImage, qreal dx, qreal dy, qreal dw, qreal dh);
void drawImage(const QVariant& image, int width, int height, const QString& format, qreal sx, qreal sy,qreal sw, qreal sh, qreal dx, qreal dy,qreal dw, qreal dh);

// Pixel manipulation

ImageData createImageData(double sw, double sh);//Empty Image
ImageData createImageData(ImageData fromImage);//from another Image
ImageData createImageData(ArrayBuffer value); //From arraybuffer
void putImageData(ImageData imgData,double dx, double dy);
void putImageData(ImageData imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
ImageData getImageData(qreal sx, qreal sy, qreal sw, qreal sh);

Canvas JavaScript Example

The canvas is initially blank. To display something, a script first needs to access the rendering context and draw on it:

var ctx = me.context2d;

then you can use the canvas methods, as in the below example

function GenericCanvasWgt1_onDraw(me, eventInfo)
{
    var ctx = me.context2d;
    ctx.fillStyle = 'red';
    ctx.fillRect(0,0,250,250);
    ctx.fillStyle = 'green';
    ctx.fillRect(250,0,250,250);
    ctx.fillStyle = 'blue';
    ctx.fillRect(0,250,250,250);
    ctx.fillStyle = 'black';
    ctx.fillRect(250,250,250,250);
}
				
function GenericCanvasWgt1_onMouseDown(me, eventInfo)
{
    alert("X = " + eventInfo.posX + "\nY = " + eventInfo.posY );
}

The update method can be used to dynamically redraw a canvas widget

function BtnStd1_btn_onMouseClick(me, eventInfo)
{
    var myCanvasWidget = page.getWidget("GenericCanvasWgt1");    
    myCanvasWidget.update()
}